<template>
    <div>
        <crumbs></crumbs>
        <h1>查询不带头像的所有学生信息</h1>
        <el-table :data="stuData" style="width: 100%;" id="table">
            <el-table-column prop="stu_name" label="姓名"></el-table-column>
            <el-table-column prop="stu_sex"  label="性别"></el-table-column>
            <el-table-column prop="stu_jg"  label="籍贯"></el-table-column>
            <el-table-column prop="stu_date" label="出生日期"></el-table-column>
            <el-table-column prop="stu_hobby" label="爱好"></el-table-column>
            <el-table-column prop="stu_gbf" label="男女朋友"></el-table-column>
            <el-table-column prop="stu_id" label="学号"></el-table-column>
        </el-table>
        <div style="margin-top:30px">
            <el-pagination background layout="prev, pager, next" :total="number" :pageSize="page" :current-page="currentPageNumber" @current-change="currentChange"></el-pagination>
        </div>
        <el-button type="success" round @click="turnExcel">转为Excel格式</el-button>
    </div>
</template>

<script>
import {search_info_all} from '@/utils/studentsInfo.js';
import XLSX from 'xlsx';
import FileSaver from "file-saver";
    export default {
        data(){
            return{
                stuData:null,
                number:0,//数据的总个数
                page:5,//五条数据一页
                totalData:0,//请求回来的总数据
                currentPageNumber:1//当前页码
            }
        },
        async mounted(){
            let result = await search_info_all({
                method:'get',
                url:'/search_info_not',
                params:{},
                headerType:''
            });
            this.stuData = result;
            this.number = result.length;
            this.totalData = result;
            console.log(this.number);
            this.stuData = this.totalData.slice(
                (this.currentPageNumber - 1) * this.page,this.currentPageNumber * this.page//(当前页码 - 1) * 五条数据一页，当前页码 * 五条数据一页
            );
        },
        methods:{
            turnExcel(){
                //  XLSX.utils.table_to_book（） xlsx上的方法 参数一获取的table对象 参数二是配置情况 raw:true 是否生成行
                let wb = XLSX.utils.table_to_book(document.getElementById('table'),{raw:true});
                // 根据工作簿当中的内容将其变成二进制的 输出
                let wbout = XLSX.write(wb,{bookType:'xlsx',bookSST:true,type:'array'});
                try{
                    FileSaver.saveAs(
                        // 存到blob对象当中 blob：window自带的存储数据的东西
                        new Blob([wbout],{type:"application/octet-stream"}),
                        "studentsInfo.xlsx"//存储的xlsx文件名字
                    )
                }catch(e){
                    console.log(e);
                }
            },
            currentChange(value){
                console.log(value);
                this.stuData = this.totalData.slice((value - 1) * this.page,value * this.page);
            },
        }
    }
</script>

<style lang="scss" scoped>
h1{
    font-size: 20px;
}
</style>